<template>
  <view v-if="show" class="showDetail">
    <!-- 关闭按钮 -->
    <view @click="close" class="close-button">
      <view class="main-close">
        <i class="bi bi-x"></i>
      </view>
    </view>

    <!-- 内容滚动区 -->
    <el-scrollbar class="detail-scroll">
      <!-- 帖子内容区 -->
      <view class="articel">
        <!-- 作者信息 -->
        <view class="detail-header">
          <img class="avatar" src="https://treedong.com/content/templates/Alpha/assets/images/momo.webp" />
          <view class="user-information">
            <text class="hide-name">匿名</text>
            <view class="publish-infor">
              <view class="publish-time">{{ formatTime(post.post.createTime) }}</view>
              <view class="location-infor">
                <i class="bi bi-geo-alt"></i>
                <text class="publish-location">{{ post.post.location || '湖南' }}</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 帖子标题和内容 -->
        <view class="detail-title">
          <text>{{ post.post.title }}</text>
        </view>
        <view class="detail-content">
          <text>{{ post.post.content }}</text>
        </view>

      </view>

      <!-- 互动功能区 -->
      <view class="interaction-module">
        <view class="interaction-item" @click="toggleLike">
          <i class="bi" :class="[isLiked ? 'bi-heart-fill liked' : 'bi-heart']"></i>
          <text>{{ post.post.likeCount || 0 }}</text>
        </view>
        <view class="interaction-item">
          <i class="bi bi-chat-left-text"></i>
          <text>{{ post.comments.length || 0 }}</text>
        </view>
        <view class="interaction-item">
          <i class="bi bi-share"></i>
        </view>
      </view>

      <!-- 评论输入区 -->
      <view class="comment-module">
        <input 
          v-model="commentText" 
          placeholder="写下你的评论..." 
          @confirm="submitComment"
          class="comment-input"
        />
        <button 
          @click="submitComment" 
          :disabled="!commentText.trim()"
          class="comment-submit"
        >
          提交
        </button>
      </view>

      <!-- 评论列表 -->
      <view class="comment-list">
        <view 
          v-for="(comment, index) in post.comments" 
          :key="index" 
          class="single-comment"
        >
          <img class="comment-avatar" src="https://treedong.com/content/templates/Alpha/assets/images/momo.webp" />
          <view class="comment-content">
            <text class="comment-author">匿名用户</text>
            <text class="comment-text">{{ comment.content }}</text>
          </view>
        </view>
      </view>
    </el-scrollbar>
  </view>
</template>

<script>
export default {
  name: 'PostDetail',
  props: {
    show: {
      type: Boolean,
      required: true
    },
    post: {
      type: Object,
      default: () => ({})
    }
  },
  emits: ['close', 'submit-comment'],
  data() {
    return {
      commentText: '',
      isLiked: false
    }
  },
  methods: {
    close() {
      this.$emit('close');
    },
    submitComment() {
      if (this.commentText.trim()) {
        this.$emit('submit-comment', this.commentText.trim());
        this.commentText = '';
      }
    },
    async toggleLike() {
      // 保存旧状态用于回滚
      const oldStatus = this.isLiked;
      const oldCount = this.post.post.likeCount || 0;
      
      // 立即更新UI（乐观更新）
      this.isLiked = !oldStatus;
      this.post.post.likeCount = oldStatus ? Math.max(0, oldCount - 1) : oldCount + 1;
      
      try {
        // 调用父组件方法
        await this.$emit('like', {
          postId: this.post.post.postId,
          isLike: this.isLiked
        });
        
        // 成功提示
        uni.showToast({
          title: this.isLiked ? '点赞成功' : '已取消',
          icon: 'success'
        });
        
      } catch (error) {
        // 失败时回滚状态
        this.isLiked = oldStatus;
        this.post.post.likesCount = oldCount;
        
        uni.showToast({
          title: '操作失败: ' + (error.message || '未知错误'),
          icon: 'none'
        });
      }
    },
    formatTime(timestamp) {
      if (!timestamp) return '';
      const date = new Date(timestamp);
      const now = new Date();
      const diff = now - date;
      const day = 24 * 60 * 60 * 1000;
      
      if (diff < day) return '今天';
      if (diff < 7 * day) return `${Math.floor(diff/day)}天前`;
      
      return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2,'0')}-${date.getDate().toString().padStart(2,'0')}`;
    }
  }
}
</script>

<style scoped>
.showDetail {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.close-button {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001;
  cursor: pointer;
}

.bi-x {
  font-size: 24px;
  color: white;
}

.detail-scroll {
  overflow: auto;
  width: 60%;
  height: 80%;
  background-color: #ebf0f6;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.articel {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.detail-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.avatar {
  width: 45px;
  height: 45px;
  border-radius: 8px;
  margin-right: 12px;
}

.user-information {
  flex: 1;
}

.hide-name {
  font-weight: 500;
  font-size: 16px;
  color: #333;
}

.publish-infor {
  display: flex;
  margin-top: 4px;
}

.publish-time {
  font-size: 12px;
  color: #888;
  margin-right: 15px;
}

.bi-geo-alt {
  font-size: 12px;
  color: #5f8dee;
  margin-right: 4px;
}

.publish-location {
  font-size: 12px;
  color: #888;
}

.detail-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #203656;
}

.detail-content {
  font-size: 15px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 15px;
}

.detail-image {
  width: 100%;
  border-radius: 8px;
  margin-top: 15px;
}

.interaction-module {
  display: flex;
  background-color: white;
  border-radius: 8px;
  padding: 15px 20px;
  margin-bottom: 20px;
}

.interaction-item {
  display: flex;
  align-items: center;
  margin-right: 25px;
  cursor: pointer;
}

.interaction-item .bi {
  font-size: 18px;
  margin-right: 5px;
}

.interaction-item .liked {
  color: #ff4757;
}

.comment-module {
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
  display: flex;
}

.comment-input {
  flex: 1;
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 20px;
  margin-right: 10px;
}

.comment-submit {
  background-color: #5f8dee;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 0 20px;
  cursor: pointer;
}

.comment-submit:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.comment-list {
  background-color: white;
  border-radius: 8px;
  padding: 15px;
}

.single-comment {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.comment-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 12px;
}

.comment-content {
  flex: 1;
}

.comment-author {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
  display: block;
}

.comment-text {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}
</style>